<template>
	<div class="ele-body">
		<el-card shadow="never">
			<!-- 搜索表单 -->
			<el-form
				:model="where"
				label-position="left"
				label-width="77px"
				class="ele-form-search"
				@keyup.enter.native="reload"
				@submit.native.prevent>
        <el-row :gutter="15">


        					<el-col :lg="6" :md="12">
        						<el-form-item label="年级:">
        							<el-select
        								filterable
        								clearable
        								v-model="where.gradeId"
        								size="small"
        								@change="$forceUpdate();getClassList()"
        								placeholder="-请选择年级-"
        								class="ele-fluid">
        								<el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
        							</el-select>
        						</el-form-item>
        					</el-col>
                  <el-col :lg="6" :md="12">
                  	<el-form-item label="班级:">
                  		<el-select
                  			filterable
                  			clearable
                  			v-model="where.classId"
                  			size="small"
                  			placeholder="-请选择班级-"
                  			class="ele-fluid">
                  			<el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
                  		</el-select>
                  	</el-form-item>
                  </el-col>
                  <el-col :lg="6" :md="12">
                  	<el-form-item label="项目:">
                  		<el-select
                  			filterable
                  			clearable
                  			v-model="where.projectId"
                  			size="small"
                  			placeholder="-请选择项目-">
                  			<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"/>
                  		</el-select>
                  	</el-form-item>
                  </el-col>
                  <el-col :lg="6" :md="12">
                  	<el-form-item label="性别:">
                  		<el-select
                  			clearable
                  			v-model="where.gender"
                  			placeholder="请选择性别"
                  			class="selects">
                  			<el-option label="男" value="1"/>
                  			<el-option label="女" value="2"/>
                  			<el-option label="未知" value="3"/>
                  		</el-select>
                  	</el-form-item>
                  </el-col>
        <!--					<el-col :lg="6" :md="12">-->
        <!--						<el-form-item label="院系类型:">-->
        <!--							<el-select-->
        <!--								clearable-->
        <!--								v-model="where.yxtype"-->
        <!--								placeholder="请选择院系类型"-->
        <!--								@change="getDepartmentsList"-->
        <!--								class="ele-fluid">-->
        <!--								<el-option label="自然院系" value="1"/>-->
        <!--								<el-option label="体育院系" value="2"/>-->
        <!--							</el-select>-->
        <!--						</el-form-item>-->
        <!--					</el-col>-->

        <!--					<el-col :lg="6" :md="12">-->
        <!--						<el-form-item label="院系选择:">-->
        <!--							<el-select-->
        <!--								filterable-->
        <!--								clearable-->
        <!--								v-model="where.departmentsId"-->
        <!--								size="small"-->
        <!--								@change="$forceUpdate();getProfessionalList();getClassList()"-->
        <!--								placeholder="-请选择院系-"-->
        <!--								class="ele-fluid">-->
        <!--								<el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>-->
        <!--							</el-select>-->
        <!--						</el-form-item>-->
        <!--					</el-col>-->
        				</el-row>

				<el-row :gutter="15">
<!--					<el-col :lg="6" :md="12">-->
<!--						<el-form-item  label="专业:">-->
<!--							<el-select-->
<!--								filterable-->
<!--								clearable-->
<!--								v-model="where.professionalId"-->
<!--								size="small"-->
<!--								@change="$forceUpdate();getClassList()"-->
<!--								placeholder="-请选择专业-"-->
<!--								class="ele-fluid">-->
<!--								<el-option v-for="item in professionalList" :key="item.id" :label="item.name" :value="item.id"/>-->
<!--							</el-select>-->
<!--						</el-form-item>-->
<!--					</el-col>-->



<!--					<el-col :lg="6" :md="12">-->
<!--						<el-form-item label="任务名称:">-->
<!--							<el-select-->
<!--								filterable-->
<!--								clearable-->
<!--								v-model="where.taskId"-->
<!--								size="small"-->
<!--								placeholder="-请选择任务-"-->
<!--								class="ele-fluid">-->
<!--								<el-option v-for="item in taskList" :key="item.id" :label="item.name" :value="item.id"/>-->
<!--							</el-select>-->
<!--						</el-form-item>-->
<!--					</el-col>-->

					<el-col :lg="6" :md="12">
						<el-form-item label="关键字:">
							<el-input
								clearable
								v-model="where.keywords"
								placeholder="请输入姓名或学籍号"/>
						</el-form-item>
					</el-col>
          <el-col :lg="7" :md="12">
          	<el-form-item label="统计日期:">
          		<el-date-picker
          			:editable="false"
          			v-model="where.start_end"
          			type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
          			range-separator="至"
          			start-placeholder="开始日期"
          			end-placeholder="结束日期">
          		</el-date-picker>
          	</el-form-item>
          </el-col>

				</el-row>
        <el-row :gutter="15">
        <div class="ele-form-actions">
        	<el-button
        		type="primary"
        		icon="el-icon-search"
        		class="ele-btn-icon"
        		@click="reload">查询
        	</el-button>
        	<el-button @click="reset">重置</el-button>
        </div>
        </el-row>
			</el-form>
			<!-- 数据表格 -->
			<ele-pro-table
				ref="table"
				:where="where"
				:datasource="url"
				:columns="columns"
				:selection.sync="selection"
				height="calc(100vh - 185px)">
				<!-- 表头工具栏 -->
				<template slot="toolbar">
          <el-button
            @click="scoredelImport(row)"
            type="success"
            icon="el-icon-plus"
            class="ele-btn-icon"
            size="small">导入删除
          </el-button>
					<el-button
						@click="removeBatch"
						type="danger"
						icon="el-icon-delete"
						class="ele-btn-icon"
						size="small">批量删除
					</el-button>
				</template>
				<!-- 操作列 -->
				<template slot="action" slot-scope="{row}">
					<el-button type="danger" icon="el-icon-delete" circle @click="removeOne(row)"></el-button>
					<el-link v-if="row.videoUrlList"
					         type="primary"
					         :underline="false"
					         icon="el-icon-video-camera"
					         @click="openVideo(row)">视频
					</el-link>
				</template>
				<!-- 类型列 -->
				<template slot="mode" slot-scope="{row}">
					<el-tag v-if="row.type === 1" type="" size="small">训练模式</el-tag>
					<el-tag v-if="row.type === 0" type="success" size="small">测试模式</el-tag>
					<!-- <el-tag v-if="row.type === 3" type="warning" size="small">体育赛事</el-tag> -->
				</template>

				<!-- 性别列 -->
				<template slot="gender" slot-scope="{row}">
					<el-tag v-if="row.gender === 1" type="" size="small">男</el-tag>
					<el-tag v-if="row.gender === 2" type="success" size="small">女</el-tag>
					<el-tag v-if="row.gender === 3" type="warning" size="small">未知</el-tag>
				</template>

				<!-- 评定列 评级：0不及格 1优秀 2良好 3及格-->
				<template slot="rating" slot-scope="{row}">
					<el-tag v-if="row.rating === 0" type="" size="small">不及格</el-tag>
					<el-tag v-if="row.rating === 1" type="" size="small">优秀</el-tag>
					<el-tag v-if="row.rating === 2" type="success" size="small">良好</el-tag>
					<el-tag v-if="row.rating === 3" type="warning" size="small">及格</el-tag>
				</template>

			</ele-pro-table>
		</el-card>
    <scoredel-import
    :data="current"
    :visible.sync="showscoredelImport"
    @done="reload"/>
		<!-- 体测视频弹窗 -->
		<div v-if="showVideoModal">
			<video-modal :visible.sync="showVideoModal" title="体测视频" :video-url="current.videoUrlList" :width="'100%'"/>
		</div>
	</div>
</template>

<script>
import {mapGetters} from "vuex";
import XLSX from 'xlsx';
import ScoredelImport from './scoredel-import';
import VideoModal from "@/views/tiyutestrecord/video-modal.vue";

export default {
	name: 'ExamTiyutestRecord',
	components: {ScoredelImport,VideoModal},
	computed: {
		...mapGetters(["permission"]),
	},
	data() {
		return {
			// 表格数据接口
			url: '/h5/list',
			// 表格列配置
			columns: [
				{
					columnKey: 'selection',
					type: 'selection',
					width: 30,
					align: 'center',
					fixed: "left"
				},
				{
					prop: 'project',
					label: '项目',
					showOverflowTooltip: true,
					show:true,
					minWidth: 94,
					align: 'center',
				},
				{
					prop: 'testerName',
					label: '姓名',
					showOverflowTooltip: true,
					show:true,
					minWidth:80,
					align: 'center',
				},
				{
					prop: 'testerNumber',
					label: '学号',
					showOverflowTooltip: true,
					show:true,
					minWidth:100,
					align: 'center',
				},
				{
					prop: 'score',
					label: '运动成绩',
					showOverflowTooltip: true,
          sortable: 'custom',
					show:true,
					minWidth:120,
					align: 'center',
				},
				{
					prop: 'bmi',
					label: 'BMI',
					showOverflowTooltip: true,
					show:true,
					minWidth:60,
					align: 'center',
				},
				{
					prop: 'createdDate',
					label: '运动时间',
					showOverflowTooltip: true,
					show:true,
					minWidth:160,
					align: 'center',
				},
				{
					prop: 'gender',
					label: '性别',
					showOverflowTooltip: true,
					show:true,
					minWidth: 60,
					align: 'center',
					slot: 'gender',
				},
				{
					prop: 'grade',
					label: '年级',
					showOverflowTooltip: true,
					show:true,
					minWidth:120,
					align: 'center',
				},
				{
					prop: 'class_name',
					label: '班级',
					showOverflowTooltip: true,
					show:true,
					minWidth:150,
					align: 'center',
				},

				// {
				// 	prop: 'task',
				// 	label: '任务名称',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth:60,
				// 	align: 'center',
				// },
				// {
				// 	prop: 'model',
				// 	showOverflowTooltip: true,
				//     show:false,
				// 	label: '任务模式',
				// 	minWidth:60,
				// 	align: 'center',
				// 	slot: 'mode',
				// },
				// {
				// 	prop: 'duration',
				// 	label: '运动耗时',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth:60,
				// 	align: 'center',
				// },
				// {
				// 	prop: 'pingscore',
				// 	label: '评分',
				// 	sortable: 'custom',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth: 100,
				// 	align: 'center',
				// },
				// {
				// 	prop: 'ratingStr',
				// 	label: '评定',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth: 100,
				// 	align: 'center',
				// 	//slot: 'rating',
				// },
				//
				// {
				// 	prop: 'school',
				// 	label: '学校',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth:60,
				// 	align: 'center',
				// },
				// {
				// 	prop: 'departments',
				// 	label: '所属院系',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth:60,
				// 	align: 'center',
				// },
				// {
				// 	prop: 'professional',
				// 	label: '专业',
				// 	showOverflowTooltip: true,
				// 	show:false,
				// 	minWidth:60,
				// 	align: 'center',
				// },
				{
					columnKey: 'action',
					label: '操作',
					show:true,
					width: 120,
					align: 'left',
					resizable: false,
					slot: 'action',
					fixed: "right"
				}
			],
			// 表格搜索条件
			where: {},
			// 表格选中数据
			selection: [],
			// 当前编辑数据
			current: null,
      showscoredelImport:false,
			// 是否显示视频弹窗
			showVideoModal: false,
			// 学年列表
			annualList: [],
			// 项目列表
			projectList: [],
			// 年级列表
			gradeList: [],
			// 院系列表
			departmentsList: [],
			// 专业列表
			professionalList: [],
			// 班级列表
			classList: [],
			// 任务列表
			taskList: [],
		};
	},
	mounted() {
		// 学年列表
		this.getAnnualList();
		// 获取项目列表
		this.getProjectList();
		// 获取年级列表
		this.getGradeList();
		// 获取院系列表
		this.getDepartmentsList();
		// 获取专业列表
		this.getProfessionalList();
		// 获取班级列表
		this.getClassList();
		// 获取任务列表
		this.getTaskList();
	},
	methods: {
		/* 查看视频 */
		openVideo(row) {
			this.current = row;
			this.showVideoModal = true;
		},
		openWeb(urls){
			this.$router.push({path: '/newWebView/newWebView', query: {urls: urls}});
		},
    scoredelImport(row) {
      this.current = row;
      this.showscoredelImport = true;
    },
		/* 刷新表格 */
		reload() {
			this.$refs.table.reload({where: this.where});
		},
		/* 重置搜索 */
		reset() {
			this.where = {};
			this.reload();
		},
		/**
		 * 获取学年列表
		 */
		getAnnualList() {
			this.$http.post('/annual/getAnnualList').then(res => {
				if (res.data.code === 0) {
					this.annualList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取项目列表
		 */
		getProjectList() {
			this.$http.post('/project/getProjectsList').then(res => {
				if (res.data.code === 0) {
					this.projectList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取年级列表
		 */
		getGradeList() {
			this.$http.post('/grade/getGradesList').then(res => {
				if (res.data.code === 0) {
					this.gradeList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取院系列表
		 */
		getDepartmentsList() {
			if(this.where.yxtype){
				delete this.where.departmentsId
				delete this.where.professionalId
				delete this.where.classId
				// this.where.departmentsId = '';
				// this.where.professionalId = '';
				// this.where.classId = '';
				// this.$forceUpdate();
			}
			this.$http.post('/departments/getDepartmentsList', {type: this.where.yxtype}).then(res => {
				if (res.data.code === 0) {
					this.departmentsList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});

			this.getProfessionalList();
			this.getClassList();
		},
		/**
		 * 获取专业列表
		 */
		getProfessionalList() {
			this.$http.post('/professional/getProfessionalsList',{type: this.where.yxtype,superior:this.where.departmentsId}).then(res => {
				if (res.data.code === 0) {
					this.professionalList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取班级列表
		 */
		getClassList() {
			this.$http.post('/clss/getClassList',{yid:this.where.departmentsId,gid:this.where.gradeId,pid:this.where.professionalId,stype:this.where.yxtype}).then(res => {
				if (res.data.code === 0) {
					this.classList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/**
		 * 获取任务列表
		 */
		getTaskList() {
			this.$http.post('/task/getTaskList').then(res => {
				if (res.data.code === 0) {
					this.taskList = res.data.data;
				} else {
					this.$message.error(res.data.msg);
				}
			}).catch(e => {
				this.$message.error(e.message);
			});
		},
		/* 批量删除 */
		removeBatch() {
			if (!this.selection.length) {
				this.$message.error('请至少选择一条数据')
				return;
			}
			this.$confirm('确定要删除选中的数据吗?', '提示', {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading({lock: true});
				this.$http.post('/h5/deleter', {id: this.selection.map(d => d.id)}).then(res => {
					loading.close();
					if (res.data.code === 0) {
						this.$message({type: 'success', message: res.data.msg});
						this.reload();
					} else {
						this.$message.error(res.data.msg);
					}
				}).catch(e => {
					loading.close();
					this.$message.error(e.message);
				});
			}).catch(() => {
			});
		},
		removeOne(item) {
			this.$confirm('确定要删除选中的数据吗?', '提示', {
				type: 'warning'
			}).then(() => {
				const loading = this.$loading({lock: true});
				this.$http.post('/h5/deleter', {id: item.id}).then(res => {
					loading.close();
					if (res.data.code === 0) {
						this.$message({type: 'success', message: res.data.msg});
						this.reload();
					} else {
						this.$message.error(res.data.msg);
					}
				}).catch(e => {
					loading.close();
					this.$message.error(e.message);
				});
			}).catch(() => {
			});
		},
	}
}
</script>

<style>
.ele-body{
	padding:0!important;
}
.selecttinmers{
	width: 100%!important;
}
.selecttinmers .el-picker-panel__body{
	min-width: 50%!important;
}
.selecttinmers .el-date-range-picker__content .el-date-range-picker__header div{
	margin:0!important;
}
</style>
